jQuery — Selecting Parents and Elements of One Type

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:only-of-type Selector

We can use the :only-of-type selector to select all elements that have no siblings with the same element name.

For example, if we have:

<div>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

<div>
  None
</div>

<div>
  <button>Sibling</button>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

Then we can get buttons that are the only child in the div by writing:

$("button:only-of-type").text("Alone").css("border", "2px blue solid");

Then we change their text and add a border to them.

.outerHeight()

The .outerHeight() method lets us get the computed outer height, which includes the padding, border, and optionally margin, for the first element in the set of matched elements.

It can also be used to set the outer height of every matched element.

For example, if we have:

<p>Hello</p>

Then we get the outer height with the margin by writing:

const p = $("p").first();
console.log(p.outerHeight(true));

true means we include the margin.

If we have:

<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>

Then we can set the outer height of the div when we click it by writing:

const modHeight = 60;
$("div").one("click", function() {
  $(this).outerHeight(modHeight);
});

.outerWidth()

The .outerWidth() method gets the current computed outer width, including the padding, border, and optionally the margin, for the first element of the set of matched elements.

It can also be used to set the outer width of all matched elements.

It can also be used to set the outer height of every matched element.

For example, if we have:

<p>Hello</p>

Then we get the outer height with the margin by writing:

const p = $("p").first();
console.log(p.outerWidth(true));

true means we include the margin.

If we have the following HTML:

<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>

and CSS:

.mod {
  background: blue;
  cursor: default;
}

Then we can set the outer height of the div when we click it by writing:

const modHeight = 60;
$("div").one("click", function() {
  $(this).outerWidth(modHeight).addClass("mod");;
});

We call addClass to add the mod class with a blue background.

.parent()

The .parent() method lets us get the parent element of the given element.

For example, if we have:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Then the li with the item-a class’s parent and add a background to it by writing:

$("li.item-a").parent().css("background-color", "red");

:parent Selector

The :parent selector lets us get the parent of a given element.

For example, if we have:

<table border="1">
  <tr>
    <td>Value 1</td>
    <td></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td></td>
  </tr>
</table>

Then we can fade the tr by writing:

$("td:parent").fadeTo(1500, 0.3);

Conclusion

We can select parent elements and elements with a given type with jQuery.